<template>
	<view class="container">
		<view class="tip_text">欢迎登录</view>
		<view class="loginMethod_box">
			<view class="code_login" :class="loginMethod==1?'active':''" @click="selectLoginMethod(1)">手机验证码登录</view>
			<view class="accountNumber_login" :class="loginMethod!=1?'active':''" @click="selectLoginMethod(2)"> 账号密码登录
			</view>
		</view>

		<view class="loginBox">
			<!-- 手机验证码登录 -->
			<view class="login_item" v-show="loginMethod==1">
				<view class="input_item">
					<input class="input_text" type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11"
						data-key="mobile" :placeholder-style="placeholderStyle" @input="mobileInputChange" />
				</view>
				<view class="input_item" style="position: relative;">
					<input class="input_text" type="number" :value="smsCode" :placeholder-style="placeholderStyle"
						placeholder="请输入验证码" placeholder-class="input-empty" data-key="smsCode"
						@input="codeInputChange" />
					<uni-countdown ref="getCodde" :phone="mobile" :tabFontColor="tabFontColor" :getStatus='getStatus'
						@obtainCode='sendCode'></uni-countdown>
				</view>
			</view>
			<!-- 账号密码登录 -->
			<view class="login_item" v-show="loginMethod!=1">
				<view class="input_item">
					<input class="input_text" type="number" :value="username" placeholder="请输入手机号码" maxlength="11"
						data-key="username" :placeholder-style="placeholderStyle" @input="usernameInputChange" />
				</view>
				<view class="input_item">
					<input class="input_text" :value="userPass" data-key="userPass" placeholder="请输入密码"
						:password="showPassword" :placeholder-style="placeholderStyle" @input="PassInputChange" />
					<view class="icons_box" @click="changePassword()">
						<uni-icons type="eye-slash-filled" size="24" v-if="showPassword" color="#9FAAB4"></uni-icons>
						<uni-icons type="eye-filled" size="24" v-if="!showPassword" color="#284F93"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="submit_logoin_box">
			<view class="logoin_btn1 " :class="mobile!=''&&smsCode!=''?'active':'' " v-show="loginMethod==1"
				@click="mobile_login()">登录/注册</view>
			<view class="logoin_btn2" :class="username!=''&&userPass!=''?'active':'' " v-show="loginMethod!=1"
				@click="account_login()">登录</view>

			<button class="confirm-btn wechat" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">
				手机号码快捷登录
			</button>
		</view>

		<!-- <view class="termOfService">点击登录/注册表示已阅读并同意 <text>服务条款</text></view> -->

		<view class="registerForgotPassword">
			<view class="register" @click="register()">没有账号？ <text>立即注册</text></view>
			<view class="forgotPassword" @click="forgotPassword()">忘记密码？</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
	export default {
		components: {
			uniCountdown
		},
		data() {
			return {
				loginMethod: 1, //登录方式  1手机验证码登录  2账号密码登录
				placeholderStyle: 'font-family: Alibaba PuHuiTi; font-weight: 400; font-size: 24rpx; color: #9FAAB4;', //提示语样式
				showPassword: true, //是否查看密码
				username: '', //账号
				userPass: '', //密码 

				mobile: '', //手机号 
				smsCode: '', //手机验证码

				logining: false,
				hasSend: false,
				loginCode: '',
				anonymous_code: '',
				loginInfo: '',
				showWxImg: false,
				tabFontColor: '#284F93',
				getStatus: false, //是否获取验证码成功 
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN ||MP-TOUTIAO
			this.wxlogin();
			// #endif
		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			// 账号
			usernameInputChange(e) {
				this.username = e.detail.value;
			},
			// 密码
			PassInputChange(e) {
				this.userPass = e.detail.value;
			},
			//手机号码
			mobileInputChange(e) {
				this.mobile = e.detail.value;
			},
			//短信验证码
			codeInputChange(e) {
				this.smsCode = e.detail.value;
			},
			// 是否显示密码
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			//选择登录方式
			selectLoginMethod(e) {
				this.loginMethod = e;
			},
			// 获取验证码 
			async sendCode() {
				let _this = this;
				if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(_this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				} else {
					this.$request({
						url: 'index/index/wx_mobile_code ',
						data: {
							'mobile': this.mobile,
							'type': 3
						},
						success: (res) => {
							if (res.code == 0) {
								uni.showToast({
									title: '验证码已发送'
								});
								_this.$refs.getCodde.sms();
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						}
					}, false);
				}
			},
			// 手机号 验证码登录
			mobile_login() {
				const mobile = this.mobile;
				let _this = this;
				var url = '/index/index/sms_login'; //登录接口---手机验证码
				if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
					return;
				}
				if (this.smsCode.length != 6) {
					uni.showToast({
						title: '请输入正确的验证码',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '请稍后...'
				});
				this.$request({
					url,
					data: {
						'mobile': mobile,
						'mobile_code': this.smsCode,
						'type': 3
						// 'isType': this.loginMethod, 						
					},
					success: (res) => {
						if (res.code == 0) {
							uni.showToast({
								title: '登录成功'
							});
							this.logining = true;
							_this.login(res.data);
							_this.setUserInfo();
							uni.navigateBack();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						uni.hideLoading();
					}
				}, false);
			},
			// 账户登录
			account_login() {
				let _this = this;
				var url = '/index/index/wx_login_api'; //登录接口---账号密码
				uni.showLoading({
					title: '请稍后...'
				});
				this.$request({
					url,
					data: {
						'username': this.username,
						'password': this.userPass,
						// 'isType': this.loginMethod,
					},
					success: (res) => {
						if (res.code === 0) {
							uni.showToast({
								title: '登录成功'
							});
							this.logining = true;
							_this.login(res.data);
							_this.setUserInfo();
							uni.navigateBack();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						uni.hideLoading();
					}
				}, false);
			},

			// 微信获取手机号登录
			getPhoneNumber(e) {
				let _this = this;
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading({
						title: '请稍后...'
					});
					const that = this;
					const url = 'index/index/wx_login'
					const data = {
						'code': this.loginCode,
						'iv': e.detail.iv,
						'encryptedData': e.detail.encryptedData,
					};
					this.$request({
						url,
						data,
						success: (res) => {
							if (res.code == 200) {
								uni.showToast({
									title: '登录成功'
								});
								_this.login(res.data);
								_this.setUserInfo();
								uni.navigateBack();
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
							uni.hideLoading();
						},

					}, false);
				}
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.$showMsg('您取消了授权', 1500, 'error');
				}
			},
			// 获取登录code
			async wxlogin() {
				const that = this
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.loginCode = loginRes.code;
					}
				});
				// #endif
				// #ifdef MP-TOUTIAO
				tt.login({
					force: true,
					success(loginRes) {
						that.loginCode = loginRes.code;
						that.anonymous_code = loginRes.anonymousCode;
					},
					fail(res) {
						console.log(`login获取登录code调用失败`);
					},
				});
				// #endif	
				// #ifdef MP-BAIDU	
				swan.getLoginCode({
					success(loginRes) {
						if (loginRes.code) {
							uni.setStorageSync('code', loginRes.code)
							that.loginCode = loginRes.code;
						} else {
							console.log('登录失败！' + loginRes.errMsg)
						}
					}
				})
				// #endif 
			},
			// 注册
			register() {
				uni.redirectTo({
					url: '/subMyPage/login/register'
				});
			},
			// 忘记密码
			forgotPassword() {
				uni.redirectTo({
					url: '/subMyPage/login/forgotPassword'
				});
			},
		},

	}
</script>

<style lang='scss'>
	page {
		background: #FFFFFF;
	}

	.container {
		padding: 0rpx 75rpx;

		.tip_text {
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			font-size: 48rpx;
			margin-top: 150rpx;
			margin-bottom: 50rpx;
		}

		.loginMethod_box {
			/* width: 600rpx; */
			/* height: 98rpx; */
			background: #F3F7FB;
			border-radius: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			padding: 5rpx 5rpx;
			margin-bottom: 50rpx;

			.code_login {
				width: 300rpx;
				height: 88rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #79838D;
				text-align: center;
				line-height: 88rpx;
			}

			.accountNumber_login {
				width: 300rpx;
				height: 88rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #79838D;
				text-align: center;
				line-height: 88rpx;
			}

			.active {
				background: #FFFFFF;
				color: #333333;
				box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(155, 155, 155, 0.3);
				border-radius: 18rpx;
			}
		}

		.loginBox {
			.login_item {
				.input_item {
					/* width: 600rpx; */
					height: 88rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 1px solid #999999;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					flex-wrap: nowrap;

					padding: 0rpx 30rpx;
					margin-bottom: 30rpx;

					.input_text {
						width: 100%;
					}

					.icons_box {}

					.uni-countdown {
						/* top: 24rpx !important; */
						z-index: 10;
						height: 100%;
						line-height: 88rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						flex-wrap: nowrap;
					}
				}
			}
		}

		.submit_logoin_box {
			margin-bottom: 48rpx;

			.logoin_btn1 {
				width: 600rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #1E3C72 0%, #2A5298 100%);
				border-radius: 44rpx;
				text-align: center;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 88rpx;
			}

			.logoin_btn2 {
				width: 600rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #1E3C72 0%, #2A5298 100%);
				border-radius: 44rpx;
				text-align: center;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 88rpx;
			}

			.active {
				background: linear-gradient(90deg, #1E3C72 0%, #2A5298 100%);
			}

			.confirm-btn {
				width: 600rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 44rpx;
				border: 2rpx solid #31BA34;
				margin-top: 30rpx;

				&.wechat {
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 30rpx;
					color: #31BA34;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.termOfService {
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 24rpx;
			color: #79838D;
			text-align: center;

			text {
				color: #284F93;
			}
		}

		.registerForgotPassword {
			position: absolute;
			bottom: 60rpx;
			left: 0rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;

			.register {
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				padding: 0rpx 0rpx 0rpx 75rpx;

				text {
					color: #284F93;
				}
			}

			.forgotPassword {
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				padding: 0rpx 75rpx 0rpx 0rpx;
			}
		}
	}
</style>